<template>
  <div class="app-container">
    <!--    <el-input v-model="iframeUrl" placeholder="url" />-->
    <div style="display: flex;justify-content: space-around">
      <div style="position: relative;">
        <img src="@/assets/wx/gzh-bind.png" style="height: 900px;width: 550px">
        <div style="position:absolute;width: 400px;height: 650px;border:0px;left: 75px;top:130px;background: #FFF" />
        <iframe
          id="iframe"
          style="position:absolute;width: 400px;height: 650px;border:0px;left: 75px;top:130px"
          :src="iframeUrl"
          frameborder="1"
        />
      </div>
      <div
        ref="qrCodeDiv"
        style="width:250px;margin-top: calc(50vh - 200px);margin-right: 200px"
      />
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: 'Mobile',
  data() {
    return {
      iframeUrl: document.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/m/index.html'
    }
  },
  mounted() {
    const that = this
    new QRCode(this.$refs.qrCodeDiv, {
      text: that.iframeUrl,
      width: 250,
      height: 250,
      colorDark: '#333333', // 二维码颜色
      colorLight: '#ffffff', // 二维码背景色
      correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
    })
  },
  methods: {

  }
}
</script>
